<template>
    <div class="errorpage" ref="bgstar" id="bgstar">
        <img class="errorimg" src="../../assets/images/404.png" alt="">
        <span v-for="(item,index) in spanNum" :key="index" class="span-dots" 
        :style="{top:item.y,left:item.x,transform:'scale('+item.scaler+')',animationDelay:item.rate,backgroundColor:item.rgb}"></span>
    </div>
</template>

<script>
export default {
    data(){
        return{
            spanNum:[]
        }
    },
    methods:{
           ranFun(min,max){
            return Math.floor(Math.random()*(max-min+1)+min);
        },
        starInit(){
            var screenW=document.getElementById('bgstar').offsetWidth;
            var screenH=this.$refs.bgstar.offsetHeight;
            // console.log(screenW,screenH)

             for (var i = 0; i < 550; i++) { 
                //位置随机
                var x = Math.floor(Math.random() * screenW);
                var y = Math.floor(Math.random() * screenH);
                //大小随机
                var scaler = Math.random() * 1.5;
                //频率随机
                var rate = Math.random() * 2.5;
                var r = this.ranFun(10, 250);
                var g = this.ranFun(10, 250);
                var b = this.ranFun(10, 250);
                this.spanNum.push({
                    x: x + "px",
                    y: y + "px",
                    scaler: scaler,
                    rate: rate + "s",
                    rgb: `rgb(${r},${g},${b})`
                });
            }
        }
    },
    mounted(){
        this.starInit();
    }
}
</script>

<style lang="scss" scoped>
.errorpage{
    overflow: hidden;
    width:100%;
    height:100%;
    background: rgba(0,0,0,1);
    position: relative;
    .errorimg{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width:280px; 
        height:280px;
        // border: 1px solid #ffffff; /* no */
    }
}

.span-dots {
    position: absolute;
    animation: flash 2s alternate infinite;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    // background: #fff;
  }
  @keyframes flash {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.5;
    }
  }
</style>
